<template>
  <div class="AnnounceCard">
    <div v-for="item in announcement" :key="item.Id" class="contain" @click="DetalAnnounce">
      <van-row type= "flex">
        <van-col span="24" >
          <div class="head" style="border-bottom:2px #eee solid;text-align: left;">
            <h2>{{item.Title}}</h2>
          </div>
        </van-col>
      </van-row>
      <div class="van-multi-ellipsis--l2" >
        {{item.Text}}
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Col, Row } from 'vant'
import {getAnnounce} from '../rapper/Announce/Announce'
Vue.use(NavBar).use(Col).use(Row)
export default{
  name: 'AnnounceCard',
  data () {
    return {
      announcement: []
    }
  },
  created () {
    this.getAnnounce()
  },
  methods: {
    DetalAnnounce () {
      this.$router.push('/DetalAnnounce')
    },
    async getAnnounce () {
      try {
        const res = await getAnnounce()
        this.announcement = res.data
        console.log(res.data)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
.contain{
  margin: 10px 0px 0px 0px ;
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: rgb(255, 255, 255);
}
</style>
